<template>
  <div class="home">
    <Header :title="title" />
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @input="onSeek"
      >
        <template #action>
          <div @click="onSeek">搜索</div>
        </template>
      </van-search>
    </form>
    <ul>
      <li v-for="item in records" :key="item.id" @click="topClick(item)">
        <div class="left">
          <img src="../assets/头像.png" alt="" />
          <span >{{item.custName}}</span>
        </div>
        <van-icon name="arrow" />
      </li>
    </ul>
     <div class="img" v-if="isShow">
      <van-empty description="搜索错误" />
    </div>
  </div>
</template>

<script>
import { GetClientData } from "../raxios/api";
import Header from "../components/Header";
export default {
  data() {
    return {
      title: "选择客户",
      value: "",
      mycurrent: 1,
      showMore: true,
      records: [],
      // clearable: false,
      isShow: false,
    };
  },
  methods: {
     topClick( item ) {
      // this.$router.push("/NewSee?id=" + id&name=custName);
      this.$router.push({path:'/home/Newsee',query:{id:item.id,custName:item.custName}});
    },
    onSeek() {
      GetClientData({
        keyword: this.value,
        current: this.mycurrent,
        size: "3",
      }).then((res) => {
        if (res.errCode === 0) {
          // console.log(res);
          this.records = res.data.records;
        }
        // this.showLoading = false;
        if (res.data.records.length !== 0) {
          this.showMore = true;
        } else {
          this.showMore = false;
          this.isShow = true;
        }
      });
    },
    moreClick() {
      this.mycurrent += 1;
      // this.showLoading = true;
      this.showMore = false;

      GetClientData({
        keyword: this.value,
        current: this.mycurrent,
        size: "3",
      }).then((res) => {
        if (res.errCode === 0) {
          this.records.push(...res.data.records);
        }
        // this.showLoading = false;
        if (res.data.records.length !== 0) {
          this.showMore = true;
        } else {
          this.showMore = false;
        }
      });
    },
    clientData() {
      GetClientData({
        keyword: this.value,
        current: this.mycurrent,
        size: "8",
      }).then((res) => {
        if (res.errCode == 0) {
          console.log(res.data.records);
          let { records } = res.data;
          this.records = records;
        }
      });
    },
  },
  components: {
    Header,
  },
  created() {
    this.clientData();
  },
};
</script>
 
<style lang="less" scoped>
.home{
    width: 100%;
    height: 100%;
    background-color: #efefef;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;
}
ul {
  margin-top: 0.1rem;
  li {
    display: flex;
    justify-content: space-between;
    padding: 0.1rem 0.2rem;
    background-color: #fff;
    border-bottom: 1px solid #dedede;
    .left {
      img {
        width: 0.5rem;
        height: 0.5rem;
        vertical-align: middle;
        margin-right: 0.2rem;
      }
    }
    .van-icon {
      font-size: 0.16rem;
      margin-top: 0.15rem;
      color: #999;
    }
  }
}
</style>